/**
 * @File   : Video.js
 * @Author : xue.xiaoBing
 * @Date   : 2021/4/21
 * @Desc   : 视频组件
 **/

import React, {Component} from "react";
import {
  Row, Col, Divider, Space, Badge,
  Button, List, Avatar, Input, Tree, Popover
} from "antd/lib/index";

import {ReloadOutlined, QuestionCircleFilled} from "@ant-design/icons";

import TestImg from "src/assets/images/1.jpg";
import RecommentdImg from "src/assets/images/3.jpg";

import FireSvg from "src/assets/svgs/火.svg";
import NewSvg from "src/assets/svgs/新闻.svg";
import LiveSvg from "src/assets/svgs/直播.svg";
import VideoSvg from "src/assets/svgs/视频.svg";
import PolicySvg from "src/assets/svgs/政策.svg";
import RecommendSvg from "src/assets/svgs/推荐.svg"
import HomeHeader from "src/components/head/homeHeader/HomeHeader";

const {Search} = Input;

class Video extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  render() {
    const data = [
      {
        title: '初一代数问题',
      },
      {
        title: '初二集合问题',
      },
      {
        title: '高中排列组合求解',
      },
    ];
    const treeData = [
      {
        title: '语文',
        key: '0-0',
        children: [
          {
            title: '北京',
            key: '0-0-0',
            children: [
              {
                title: '一年级',
                key: '0-0-0-0',
              },
              {
                title: '二年级',
                key: '0-0-0-1',
              },
              {
                title: '三年级',
                key: '0-0-0-2',
              },
            ],
          },
          {
            title: '上海',
            key: '0-0-1',
            children: [
              {
                title: '一年级',
                key: '0-0-1-0',
              },
              {
                title: '二年级',
                key: '0-0-1-1',
              },
              {
                title: '三年级',
                key: '0-0-1-2',
              },
            ],
          },
          {
            title: '河南',
            key: '0-0-2',
          },
        ],
      },
      {
        title: '数学',
        key: '0-1',
        children: [
          {
            title: '0-1-0-0',
            key: '0-1-0-0',
          },
          {
            title: '0-1-0-1',
            key: '0-1-0-1',
          },
          {
            title: '0-1-0-2',
            key: '0-1-0-2',
          },
        ],
      },
      {
        title: '英语',
        key: '0-2',
      },
    ];
    return (
      <div>
        <div>
          <HomeHeader/>
        </div>
        <div style={{margin: '10px 10%'}}>
          <Row justify={'spacing-around'} align={'middle'}>
            <Col span={6} style={{textAlign: 'center'}}>
              <Space align={'start'} size={30} style={{margin: '10px auto'}}>
              <span style={{textAlign: 'center'}}>
                <img src={NewSvg} alt="" style={{width: '40px'}}/>
                <p style={{margin: '0'}}>新闻</p>
              </span>
                <span>
                <img src={PolicySvg} alt="" style={{width: '40px'}}/>
                <p style={{margin: '0'}}>政策</p>
              </span>
                <span>
                <img src={FireSvg} alt="" style={{width: '40px'}}/>
                <p style={{margin: '0'}}>排行</p>
              </span>
              </Space>
            </Col>
            <Col span={12} style={{textAlign: 'center'}}>
              <div>
                <div style={{marginBottom: '5px'}}>
                  <Space size={20} align={"center"}>
                <span style={{padding: '10px'}}>
                  <img src={LiveSvg} alt="" style={{width: '30px'}}/>
                  <span style={{marginLeft: '10px', verticalAlign: 'middle'}}>直播</span>
                </span>
                    <span>
                    <span style={{verticalAlign: 'middle'}}>语文</span>
                    <Badge count={25} style={{verticalAlign: 'middle', marginLeft: '5px'}}/>
                  </span>
                    <span>
                    <span style={{verticalAlign: 'middle'}}>数学</span>
                    <Badge count={25} style={{verticalAlign: 'middle', marginLeft: '5px'}}/>
                  </span>
                    <span>
                    <span style={{verticalAlign: 'middle'}}>英语</span>
                    <Badge count={25} style={{verticalAlign: 'middle', marginLeft: '5px'}}/>
                  </span>
                    <span>
                    <span style={{verticalAlign: 'middle'}}>物理</span>
                    <Badge count={25} style={{verticalAlign: 'middle', marginLeft: '5px'}}/>
                  </span>
                    <span>
                    <span style={{verticalAlign: 'middle'}}>化学</span>
                    <Badge count={25} style={{verticalAlign: 'middle', marginLeft: '5px'}}/>
                  </span>
                  </Space>
                </div>
                <Divider style={{margin: '3px 0'}}/>
                <div style={{marginTop: '5px'}}>
                  <Space size={20} align={"center"}>
                  <span style={{padding: '10px'}}>
                    <img src={VideoSvg} alt="" style={{width: '30px'}}/>
                    <span style={{marginLeft: '10px', verticalAlign: 'middle'}}>视频</span>
                  </span>
                    <span>
                    <span style={{verticalAlign: 'middle'}}>语文</span>
                    <Badge count={25} style={{verticalAlign: 'middle', marginLeft: '5px'}}/>
                  </span>
                    <span>
                    <span style={{verticalAlign: 'middle'}}>数学</span>
                    <Badge count={25} style={{verticalAlign: 'middle', marginLeft: '5px'}}/>
                  </span>
                    <span>
                    <span style={{verticalAlign: 'middle'}}>英语</span>
                    <Badge count={25} style={{verticalAlign: 'middle', marginLeft: '5px'}}/>
                  </span>
                    <span>
                    <span style={{verticalAlign: 'middle'}}>物理</span>
                    <Badge count={25} style={{verticalAlign: 'middle', marginLeft: '5px'}}/>
                  </span>
                    <span>
                    <span style={{verticalAlign: 'middle'}}>化学</span>
                    <Badge count={25} style={{verticalAlign: 'middle', marginLeft: '5px'}}/>
                  </span>
                  </Space>
                </div>
              </div>
            </Col>
            <Col span={6} style={{textAlign: 'center'}}>
              <Space align={'start'} size={30} style={{margin: '10px auto'}}>
              <span style={{textAlign: 'center'}}>
                <img src={NewSvg} alt="" style={{width: '40px'}}/>
                <p style={{margin: '0'}}>新闻</p>
              </span>
                <span>
                <img src={PolicySvg} alt="" style={{width: '40px'}}/>
                <p style={{margin: '0'}}>政策</p>
              </span>
                <span>
                <img src={FireSvg} alt="" style={{width: '40px'}}/>
                <p style={{margin: '0'}}>排行</p>
              </span>
              </Space>
            </Col>
          </Row>
        </div>

        <div style={{margin: '50px 10%', backgroundColor: 'rgba(0,0,0,.01)', padding: '20px'}}>
          <Row gutter={[8, 0]}>
            <Col span={4}>
              <Tree
                className="draggable-tree"
                draggable
                blockNode
                treeData={treeData}
              />
            </Col>
            <Col span={16}>
              <Space direction={'vertical'} size={8}>
                <Row align={'middle'}>
                  <Col span={12}>
                    <img src={VideoSvg} alt="" style={{width: '30px'}}/>
                    <span style={{marginLeft: '10px', verticalAlign: 'middle'}}>视频</span>
                    <span style={{verticalAlign: 'middle', marginLeft: '20px'}}> 当前共有 351 个免费视频</span>
                  </Col>
                  <Col span={12}>
                    <Space style={{float: 'right'}}>
                      <Search placeholder="搜索视频..." enterButton/>
                      <Button icon={<ReloadOutlined/>} type={'link'}/>
                      <Button type={'link'}>更多</Button>
                    </Space>
                  </Col>
                </Row>
                <Row gutter={[8, 8]}>
                  <Col span={8}>
                    <div style={{height: '126px'}}>
                      <img src={TestImg} alt=""
                           style={{width: '100%', height: '100%', verticalAlign: 'middle', borderRadius: '5px'}}/>
                    </div>
                  </Col>
                  <Col span={8}>
                    <div style={{height: '126px'}}>
                      <img src={TestImg} alt=""
                           style={{width: '100%', height: '100%', verticalAlign: 'middle', borderRadius: '5px'}}/>

                    </div>
                  </Col>
                  <Col span={8}>
                    <div style={{height: '126px'}}>
                      <img src={TestImg} alt=""
                           style={{width: '100%', height: '100%', verticalAlign: 'middle', borderRadius: '5px'}}/>

                    </div>
                  </Col>
                  <Col span={8}>
                    <div style={{height: '126px'}}>
                      <img src={TestImg} alt=""
                           style={{width: '100%', height: '100%', verticalAlign: 'middle', borderRadius: '5px'}}/>

                    </div>
                  </Col>
                  <Col span={8}>
                    <div style={{height: '126px'}}>
                      <img src={TestImg} alt=""
                           style={{width: '100%', height: '100%', verticalAlign: 'middle', borderRadius: '5px'}}/>

                    </div>
                  </Col>
                  <Col span={8}>
                    <div style={{height: '126px'}}>
                      <img src={TestImg} alt=""
                           style={{width: '100%', height: '100%', verticalAlign: 'middle', borderRadius: '5px'}}/>

                    </div>
                  </Col>
                </Row>
                <Row align={'middle'} style={{marginTop: '30px'}}>
                  <Col span={12}>
                    <img src={RecommendSvg} alt="" style={{width: '30px'}}/>
                    <span style={{marginLeft: '10px', verticalAlign: 'middle'}}>推荐视频</span>
                    <Popover content={<span>根据你的人物画像推荐！</span>} placement="right" style={{backgroundColor: 'skyblue'}}>
                      <QuestionCircleFilled style={{verticalAlign: 'middle', marginLeft: '10px', color: 'skyblue'}}/>
                    </Popover>
                  </Col>
                  <Col span={12}>
                    <Space style={{float: 'right'}}>
                      <Button icon={<ReloadOutlined/>} type={'link'}/>
                      <Button type={'link'}>更多</Button>
                    </Space>
                  </Col>
                </Row>
                <Row gutter={[8, 8]}>
                  <Col span={8}>
                    <div style={{height: '126px'}}>
                      <img src={RecommentdImg} alt=""
                           style={{width: '100%', height: '100%', verticalAlign: 'middle', borderRadius: '5px'}}/>
                    </div>
                  </Col>
                  <Col span={8}>
                    <div style={{height: '126px'}}>
                      <img src={RecommentdImg} alt=""
                           style={{width: '100%', height: '100%', verticalAlign: 'middle', borderRadius: '5px'}}/>

                    </div>
                  </Col>
                  <Col span={8}>
                    <div style={{height: '126px'}}>
                      <img src={RecommentdImg} alt=""
                           style={{width: '100%', height: '100%', verticalAlign: 'middle', borderRadius: '5px'}}/>

                    </div>
                  </Col>
                </Row>
              </Space>
            </Col>
            <Col span={4}>
              <Row style={{margin: '0 10px'}}>
                <Col span={16}>
                  <h2> 排行榜</h2>
                </Col>
                <Col span={8}>
                  <Button style={{float: 'right'}} type={'link'}>更多</Button>
                </Col>
              </Row>
              <Row style={{margin: '0 10px'}}>
                <List
                  style={{width: '100%'}}
                  itemLayout="horizontal"
                  dataSource={data}
                  renderItem={item => (
                    <List.Item>
                      <List.Item.Meta
                        avatar={<Avatar src={TestImg}/>}
                        title={<a href="https://ant.design">{item.title}</a>}
                      />
                    </List.Item>
                  )}
                />
              </Row>
            </Col>
          </Row>
        </div>
      </div>
    )
  }
}

export default Video